<template>
  <div class="pane_area">
    <div class="pane_name">
      <!--<span>粒子效果</span>-->
      <!--<button class="pane_close" @click="close"></button>-->
    </div>
    <div>{{test}}</div>
    <button @click="zoomIn">放大</button>
    <button @click="zoomOut">缩小</button>
    <button @click="flyToXYZ">飞到坐标点</button>
    <button @click="drawPoint">画点</button>
    <button @click="drawLine">画线</button>
    <button @click="createPolygon">画面</button>
  </div>
</template>

<script>

  export default {
    name: "particle-effect",
    data:function () {
      return {
        test:null
      }
    },
    methods: {
      close: function () {
        this.$emit('closePane', false);
      },
      zoomIn:function(){
        var Viewerc = this.$parent.$parent.viewer;
        var CesiumAPI = this.CesiumAPI;
        CesiumAPI.NavigateObj.zoomIn(Viewerc)
      },
      zoomOut:function(){
        var Viewerc = this.$parent.$parent.viewer;
        var CesiumAPI = this.CesiumAPI;
        CesiumAPI.NavigateObj.zoomOut(Viewerc)
      },
      drawPoint:function () {
        var _this = this.$parent.$parent;
        var Cesium = this.$parent.$parent.Cesium;
        var CesiumAPI = this.CesiumAPI;
        var handler = new Cesium.ScreenSpaceEventHandler(this.$parent.$parent.viewer.scene.canvas);
        //坐标存储
        var positions = [];
        //单击鼠标左键画点
        handler.setInputAction(function (movement) {
          var cartesian = _this.viewer.scene.camera.pickEllipsoid(movement.position, _this.viewer.scene.globe.ellipsoid);
          positions.push(cartesian);
          var point = {
            position: cartesian,
            point: {
              color: Cesium.Color.RED,
              pixelSize: 25,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
            }
          };
          CesiumAPI.CreateObj.createPoint('test',_this.viewer,point,function (item) {
            console.log(item);
          });
          handler.destroy();
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      },
      drawLine:function () {
        var _this = this.$parent.$parent;
        var Cesium = this.$parent.$parent.Cesium;
        var CesiumAPI = this.CesiumAPI;
        var handler = new Cesium.ScreenSpaceEventHandler(this.$parent.$parent.viewer.scene.canvas);
        CesiumAPI.CreateObj.createLine('划线',_this.viewer,Cesium,handler,function (item) {
          console.log(item);
        });
      },
      createPolygon:function () {
        var _this = this.$parent.$parent;
        var Cesium = this.$parent.$parent.Cesium;
        var CesiumAPI = this.CesiumAPI;
        var handler = new Cesium.ScreenSpaceEventHandler(this.$parent.$parent.viewer.scene.canvas);
        CesiumAPI.CreateObj.createPolygon('画面',_this.viewer,Cesium,handler,function (item) {
          console.log(item);
        });

      },
      flyToXYZ:function () {
        this.CesiumAPI.NavigateObj.flyToXYZ(this.$parent.$parent.Cesium,this.$parent.$parent.viewer,86.5, 41.26, 2500000);
      },

      getFun: function (item){
       this.test = item;
        this.$parent.$parent.viewer.camera.flyTo({
          destination: this.$parent.$parent.Cesium.Cartesian3.fromDegrees(86.5, 41.26, 2500000),
        })
      }
    },
    mounted:function () {
      //this.$parent.geta('子组件调用父组件方法！');
    }
  }
</script>

<style scoped>
  /*.pane_area {*/
    /*position: absolute;*/
    /*top: 100px;*/
    /*right: 60px;*/
    /*width:250px;*/
    /*background-color:rgba(28,28,29,.9);*/
    /*border-radius:2px;*/
    /*padding-bottom:20px;*/
  /*}*/
  .pane_name {
    border:1px #38535e solid;
    border-radius:2px;
    height:30px;
    line-height:30px;
    color:#ffffff;
    font-size:14px;
    text-indent:10px;
  }
  .pane_close {
    float:right;
    margin:9px;
    width:10px;
    height:10px;
    background:url(../../../static/IMG/leftsider/取消.png) center no-repeat;
    border:none;
    cursor:pointer;
    outline: none;
  }
</style>
